States 狀態
狀態層是一個固定不透明度的疊加層，它使用內容相同的顏色來將普通樣式轉換為狀態樣式。狀態層會採用內容顏色作為覆蓋層，比如使用相應的內容顏色或主色調。
- 狀態有兩個視覺指示器以確保可訪問性。
- 狀態可以組合使用，例如選中和懸停
- 在所有元件中保持狀態的一致性
解釋有兩個視覺指示器：這是可訪問性（accessibility）的設計原則之一，確保不同使用者（包括視力受限的人）都能感知 UI 的狀態變化。比如顏色變化、邊框/陰影、下劃線/加粗、動畫、圖示變化
狀態層的大小為40dp，而互動目標的大小為48dp
On color 顏色
State layer tokens & values 狀態層標記與值
狀態層使用固定的不透明度百分比和內容顏色（通常是開啟狀態的顏色）來顯示不同狀態。
- Hover +8% opacity 懸停 透明度增加 8%。
- Focus +10% opacity 選中（比如鍵盤 Tab 切換）透明度增加 10%。
- Press +10% opacity 按下不放（比如點選按鈕）透明度增加 10%。
- Drag +16% opacity 拖動 透明度增加 16%。
Enabled 啟用狀態
Disabled 禁用狀態
禁用狀態指元件不可互動。適用於需要使用者先完成其他任務才能操作的場景。禁用按鈕顯示淡色且無懸停效果，禁用狀態無需滿足對比度要求。
禁用狀態適用於：
- 按鈕（Buttons）
- 卡片（Cards）
- 核取方塊（Checkboxes） 1
- 標籤（Chips）
- 列表項（List Items）
- 單選按鈕（Radio Buttons）
- 開關（Switches）
- 文字欄位（Text Fields）
- 圖示按鈕（Icon Button）2
- 單選按鈕（Radio Button）3
- 分段按鈕（Segmented Button）4
禁用狀態不適用於：
- 應用欄（App Bars）
- 徽章（Badges）
- 對話方塊（Dialogs）
- 浮動操作按鈕（FABs）
- 選單（Menus）
- 導航欄、側邊欄和導航軌（Navigation Bar, Drawer, and Rail）
- 底部或側邊彈出面板（Sheets）
- 標籤頁（Tabs）
- 工具提示（Tooltips）
Behavior 行為
1 禁用的元件無法獲得焦點、被拖動或按下，並且在點選或懸停時它們也不會改變狀態。
2 佈局中可以包含任意數量的禁用狀態。
Hover 懸停狀態
懸停狀態是由使用者使用游標在互動元素上停留時觸發的。懸停狀態下的低強排程表面覆蓋層可應用於整個元件、元件內的元素，或者以圓形覆蓋在元件的部分割槽域上。
懸停狀態適用與：
- Buttons（按鈕）
- Cards（卡片）
- Checkbox（核取方塊）
- Chips（標籤）
- Date and time pickers （日期和時間選擇器）
- List items （列表項）
- Slider （滑塊）
- Switch （開關）
- Text fields （文字欄位）
- FAB （浮動按鈕）
- icon button （按鈕）
- chip （標籤）
- Segmented buttons （分段式按鈕）
懸停狀態不適用與：
- 應用欄（App Bars） – 作為固定的導航元素，不會因滑鼠懸停而改變狀態。
- 徽章（Badges） – 僅用於顯示狀態或通知，不支援懸停效果。
- 對話方塊（Dialogs） – 作為彈出內容，通常不會響應懸停狀態。
- 選單（Menus） – 選單項可以有懸停狀態，但整個選單容器不會。
- 導航欄、側邊欄和導航軌（Navigation Bar, Drawer, and Rail） – 這些元素通常是持久顯示的，因此不會因滑鼠懸停而改變狀態。
- 底部或側邊彈出面板（Sheets） – 作為內容區域，不會因滑鼠懸停而觸發變化。
- 標籤頁（Tabs） – 選項卡可能有選中狀態，但不會單獨響應懸停狀態。
Behavior 行為
懸停狀態（Hover States）可以與其他狀態組合使用：
同一個介面佈局（Layout）中，同時只能有一個元素處於懸停狀態（Hover State）
Focused 焦點狀態
當使用者使用鍵盤或語音突出顯示某個元素時，就會呈現出聚焦狀態。聚焦狀態適用於所有互動元件。聚焦狀態下高強排程的表面覆蓋層可應用於整個元件、元件內的元素，或者以圓形覆蓋在元件的部分割槽域上。
焦點狀態適用：
- 按鈕（Buttons） – 選中時可能顯示外邊框或背景高亮。
- 卡片（Cards） – 選中時可能加粗輪廓或增加陰影。
- 核取方塊（Checkbox） – 被 Tab 鍵選中時，外邊框可能變亮。
- 日期和時間選擇器（Date and Time Pickers） – 聚焦時顯示高亮或邊框變化。
- 列表項（List Items） – 選中時可能會加深背景顏色。
- 選擇控制元件（Selection Controls） – 例如單選按鈕、滑動開關等會顯示選中狀態。
- 文字欄位（Text Fields） – 聚焦時可能顯示藍色外邊框或下劃線。
- TAB 懸浮按鈕
- icon button 圖示按鈕
- chip 標籤
- Segmented buttons 分段式按鈕
焦點狀態不適用：
- 應用欄（App Bars） – 作為全域性導航元素，不會因聚焦狀態而改變外觀。
- 徽章（Badges） – 主要用於顯示通知，不需要聚焦狀態。
- 橫幅（Banner） – 作為提示資訊，不支援鍵盤聚焦。
- 卡片（Card） – 只有當卡片內部有可互動內容時，才可能支援聚焦狀態。
- 對話方塊（Dialogs） – 對話方塊的按鈕可以聚焦，但整個對話方塊不會。
- 導航欄/側邊欄/導航軌（Navigation Bar, Drawer, and Rail） – 這些元件通常不會響應鍵盤聚焦。
- 工作表（Sheets） – 作為資訊容器，不會單獨支援聚焦狀態。
× 避免整個應用欄繼承焦點狀態
Keyboard Focus Indicator 鍵盤焦點指示器
使用者使用Tab鍵在互動元素之間導航網頁。當切換到某個元素時，會顯示一個環形的鍵盤焦點指示器，幫助使用者追蹤他們的位置並使用鍵盤進行互動。
Behavior 行為
焦點狀態透過Tab鍵（或等效按鍵）觸發，可與懸停、啟用或選中狀態組合使用。
Pressed 按下狀態
按下和帶有凸起的按下
按下狀態適用於
- Buttons 按鈕
- Cards 卡片
- Checkbox 核取方塊
- Chips 晶片
- List items 列表專案
- Text fields 文字欄位
按下狀態不適用於
- App bars 應用欄
- Badges 徽章
- Bottom navigation 底部導航
- Dialogs 對話方塊
- Menus 選單
- Sheets 工作表
- Tabs 標籤頁；製表符
Behavior 行為
啟用狀態按照使用者發起的位置而出現
啟用狀態可以透過懸停和聚焦結合的方式來呈現
一個佈局中，同時只能存在一個按下狀態
Dragged 拖拽
拖動狀態在使用者按下並移動元素時出現，使用較低強排程的覆蓋層以減少視覺干擾。覆蓋層可應用於整個元件或其內部元素，某些元件（如列表項、標籤、卡片）可透過高程變化來顯示拖動狀態。
拖拽狀態適合：
- Cards 卡片
- Chips 標籤
- List items 列表專案
- Sliders 滑塊
拖拽狀態不適合：
- App bars 應用欄
- Badges 徽章
- Buttons 按鈕
- Dialogs 對話方塊
- Menus 選單
- Navigation bar, drawer, and rail 導航欄、抽屜和側邊欄
Behavior 行為
當使用者觸控並按住元素時（例如透過點選或單擊等輸入方式），就會觸發拖拽狀態。
在一個佈局中，同一時間可能只有一個拖動狀態。